<template>
    <div>
        <auctionHead></auctionHead>
        <auctionList></auctionList>
        <div class="acution" :class="bgc">
            <span :class="{spcolor:flag==index}" v-for="(v,index) in navarr" :key="index" @click="toTwo(index)">{{ v }}</span>
        </div>
        <waterfall></waterfall>
        <auuctionFoot></auuctionFoot>
    </div>
</template>

<script>
import auctionHead from '../Auction/auctionHead.vue';
import auctionList from '../Auction/auctionList.vue';
import waterfall from '../HomeCom/waterfall.vue';
import auuctionFoot from '../Auction/auuctionFoot.vue';
export default {
    data(){
        return{
            navarr:["猜你喜欢","专场","1元起","特价房","情人节"],
            nums:20,
            count:2,
            showarr:[],
            bgc:"acution",
            flag:0
        }
    },
    components:{
        auctionHead,
        auctionList,
        waterfall,
        auuctionFoot
    },
    methods:{
        toTwo(index){
            this.count=index+1
            this.$http({
                url: "http://118.178.238.19:3001/api/pro/search",
                method: "get",
                params: {
                    count: this.count,
                    limitNum: this.nums
                }
            }).then(res => {
                this.showarr = res.data.data
                this.$bus.$emit("transmit", this.showarr);
            })
            this.flag=index
        },

    },
    mounted(){
        window.onscroll = () => {
            if (document.documentElement.scrollTop > 80) {
                this.bgc = "acutions"

            } else {
                this.bgc = "acution"
            }
            
        }
    }
}
</script>

<style scoped>
.acution{
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 3%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 15px;
    background: #f5f5f5;
}
.acutions{
    position: fixed;
    top: 80px;
}

.spcolor{
    font-weight: 900;
    color: #eb0045;
}
/* .acution span{
    
} */
</style>